<template>
	<div>
		<table style="width: 500;">
			<thead>
				<tr>
					<th><input type="checkbox" :checked="idArr.length == arr.length" name="all" id="all"
						 @click="checkall">全选</th>
					<th>商品</th>
					<th>价格</th>
				</tr>

			</thead>
			<tbody>

				<tr v-for="(item, index) in arr" :key="item.id">
					<td><input type="checkbox" name="name" :value="item.id" v-model="idArr"></td>
					<td>{{ item.name }}</td>
					<td>{{ item.price }}</td>
				</tr>
			</tbody>
		</table>

	</div>
</template>

<script setup >
import { ref, reactive } from 'vue'
// id数组里边的数量和arr 数据的数量一样,说明都点了
let idArr = ref([1, 4])
let arr = reactive([
	{ id: 1, name: "苹果", price: 100 },
	{ id: 2, name: "华为", price: 1000 },
	{ id: 3, name: "三星", price: 1000 },
	{ id: 4, name: "小米", price: 10 }
])
let checkall = function () {
	// 说明是全选
	if (idArr.value.length == arr.length) {
		// 0开始 有多少,删除多少
		// idArr.value =[]
		let lenth = idArr.value.length
		idArr.value.splice(0, lenth)
	} else {// 需要全选
		// let xin = arr.map((item) => {
		// 	return item.id
		// })
		// idArr.value = xin
		let lenth = idArr.value.length
		idArr.value.splice(0, lenth)
		arr.forEach((item) => {
			idArr.value.push(item.id)
		})
	}
}


</script>

<style scoped>
table {
	width: 500px;
	height: 200px;
}

table,
td,
th {
	border: 1px solid #ccc;
}</style>